<template>
	<view class="cu-modal" :class="modals=='payTypeModal'?'show':''" @touchmove.stop.prevent="()=>{return}" @tap="hideModal">
		<view class="cu-dialog bg-white" @tap.stop>
			<view class="cu-bar justify-end solid-bottom">
				<!-- 选择支付类型 -->
				<view class="content">{{$t('JLink.payType.modal.title')}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-gray"></text>
				</view>
			</view>
			<view class="cu-bar bg-white solid-bottom" style="padding:0 30upx 0 0"  v-for="(item,index) in list" 
				:key="index" @tap="selPayType(item)">
				<view class="text-grey">
					<image class="cu-avatar bg-white" :src="'https://statics.xmcsrv.net/weixin/cloud/payType/'+item+'.svg'" style="margin-right:20upx"></image>
					<text v-if="item===1">{{$t('JLink.payType.modal.alipay')}}</text>
					<text v-else-if="item===2">{{$t('JLink.payType.modal.weChat')}}</text>
					<text v-else-if="item===3">{{$t('JLink.payType.modal.paypal')}}</text>
					<text v-else-if="item===5">{{$t('JLink.payType.system')}}</text>
					<text v-else-if="item===7">{{$t('JLink.payType.packageCard')}}</text>
					<text v-else-if="item===9">{{$t('JLink.payType.modal.creditcard')}}</text>
					<text v-else-if="item===10">Pix{{$t('JLink.publicText.pay')}}</text>
					<text v-else-if="item===11">Apple pay</text>
				</view>
				<view v-if="payCheck===item">
					<text  class="cuIcon-check text-bold text-primary" style="font-size: 52upx;"></text>
				</view>
			</view>	
			<view>
				<button class="cu-btn block margin lg bg-primary " @tap="confirm">
					<text class="iconfont-spin"></text> {{$t('JLink.payType.modal.confirmPayment')}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { defineComponent, reactive, toRefs,watch,getCurrentInstance} from 'vue'
	import pay from '@/jvss/pageCloud/utils/pay.js'
	import { onShow } from '@dcloudio/uni-app'
	import modalMessage from '@/utils/modal.js'
	import H5Pay from '@/utils/H5Pay.js'
	export default defineComponent({
		props:{
			modalName:{
				type:String,
				default:''
			},
			orderId:{
				type:[String,Number],
				default:''
			},
			automaticPayment:{
				type:Boolean,
				default:false
			}
		},
		emits: ["update:modalName","iosPayClick"],
		setup(props,{ emit }){
			const {proxy} = getCurrentInstance()
			const { modalState,hideModal } = modalMessage(props,emit);
			const { payH5 } = H5Pay();
			const { handlePayType } = pay();
			const state = reactive({
				list:[],
				payCheck:null,
				col:{}
			})
			const getPayType = (deviceId,classifyId,item)=>{
				state.col = item;
				handlePayType({deviceId,classifyId},(data)=>{
					const {payTypes} = data;
					if(!props.automaticPayment){
						state.list = payTypes;
						state.payCheck = payTypes[0];
					}else{
						state.list = [payTypes[1]];
						state.payCheck = payTypes[1];
					}
				})
			}
			// 选择支付类型
			const selPayType = (id)=>{
				state.payCheck = id;
			}
			// 提交
			const confirm = ()=>{
				if(state.payCheck!=11){
					payH5(props.orderId,state.payCheck);
				}
			}
			return {
				...toRefs(state),
				...toRefs(modalState),
				selPayType,
				confirm,
				hideModal,
				getPayType
			}
		}
	})
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
